<!-- 
    @file: 首页文章分类组件
    @auth: lizibin
 -->
<template>
    <div class="articleCategoriesBox" v-loading="state.loading" element-loading-text="玩命加载中...">
        <div class="articleCategories_title">
            <h3 class="title"><b>文章分类</b></h3>
        </div>
        <div class="articleCategories_content">
            <ul>
                <li v-for="item in state.classifyInfo">
                    <el-icon>
                        <ArrowRight />
                    </el-icon>
                    <div @click="RouterJump('classify', item.classifyId)" class="articleBox-jump"
                        :title="item.classifyName">{{ item.classifyName }}</div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { GetArticleClass } from '@/api/foreground/index'
import {
    onMounted,
    reactive,
} from "vue";
import {
    useRouter,
    useRoute
} from 'vue-router';
const router = useRouter()
const RouterJump = (name: string, val: number) => {
    router.push({
        path: name,
        query: {
            id: val
        }
    })
}
interface ClassifyInfo {
    articleNumber: number;
    classifyId: number;
    classifyIntroduce: string;
    classifyName: string;
    color1: string;
    color2: string;
}
interface Reactive {
    classifyInfo: ClassifyInfo[];
    loading: boolean;
}
const state = reactive<Reactive>({
    classifyInfo: [],
    loading: false,
})
const loadData = (state: Reactive) => {
    state.loading = true;
    GetArticleClass().then(res => {
        state.classifyInfo = res.data
        state.loading = false;
    })
}

//挂载后加载数据
onMounted(() => {
    loadData(state);
});

</script>

<style scoped>
.articleCategoriesBox {
    background: white;
    height: auto;
    border-radius: 10px;
    margin-bottom: 20px;
    padding: 20px;
}

.articleBox-jump {
    cursor: pointer;
}

.articleCategories_title {
    margin-bottom: 15px;
    margin-top: -10px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgb(238, 238, 238);
    overflow: hidden;
}

.articleCategories_title .title {
    line-height: 40px;
    color: #474749;
}

.articleCategories_title .title b {
    display: inline-block;
    border-bottom: 4px solid #2fa7b9;
}

.articleCategories_content ul {
    overflow: hidden;
    zoom: 1;
}

.articleCategories_content li {
    height: 36px;
    line-height: 36px;
    border-bottom: 1px dotted #e4e8eb;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 50%;
    float: left;
    display: inline-flex;
    align-items: center;
}

.articleCategories_content li .el-icon {
    margin-right: 8px;
    font-size: 12px;
    color: grey;
}
</style>